<template>
    <div class="dashboard-container">
        <div class="app-container">
            <div class="edit-form">
                <el-form :model="addempfrom" :rules="addemprule" ref="userForm" label-width="220px">
                    <!-- 姓名 -->
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="username">
                                <el-input v-model="addempfrom.username" size="mini" class="inputW" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 工号 -->
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="工号">
                                <!-- 工号是系统生成的  禁用这个组件-->
                                <el-input v-model="addempfrom.workNumber" disabled size="mini" class="inputW" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!--手机  -->
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="手机" prop="mobile">
                                <el-input size="mini" class="inputW" :disabled="!!$route.params.id" v-model="addempfrom.mobile" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="部门" prop="departmentId" width="200">
                                <!-- 放置及联部门组件 会单独封装-->
                                <el-cascader class="inputW" v-model="addempfrom.departmentId" :options="deptlist"
                                    :props="treeprop" separator="-"></el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="聘用形式" prop="formOfEmployment">
                                <el-select size="mini" class="inputW" v-model="addempfrom.formOfEmployment">
                                    <el-option label="正式" :value="1" />
                                    <el-option label="非正式" :value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="入职时间" prop="timeOfEntry">
                                <el-date-picker size="mini" type="date" value-format="yyyy-MM-dd" class="inputW"
                                    v-model="addempfrom.timeOfEntry" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="转正时间" prop="correctionTime">
                                <el-date-picker v-model="addempfrom.correctionTime" size="mini" type="date"
                                    class="inputW" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 员工照片 -->
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="员工头像">
                                <imagelod v-model="addempfrom.staffPhoto"></imagelod>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 保存个人信息 -->
                    <el-row type="flex">
                        <el-col :span="12" style="margin-left:220px">
                            <el-button size="mini" type="primary" @click="queryadd">保存更新</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

        </div>
    </div>
</template>

<script>
import { getdepartment } from '@/api/department'
import { listchangetree } from '@/utils'
import { addemp, getempbyid,upempbyid } from '@/api/emplooyee'
//导入上传头像的组件
import imagelod from './components/imagelod.vue'
export default {
    components:{imagelod},
    data() {
        return {
            //添加员工的信息
            addempfrom: {
                username: '',//姓名
                workNumber: '',//工号
                mobile: '',//电话
                departmentId: null,//部门id
                formOfEmployment: '',//聘用形式
                timeOfEntry: '',//入职时间
                correctionTime: '',//转正时间
                staffPhoto:'',//用户头像
            },
            //添加员工的验证规则
            addemprule: {
                username: [{ required: true, message: '请输入员工姓名', trigger: 'blur' },],
                mobile: [{ required: true, message: '请输入电话', trigger: 'blur' },
                {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '手机号格式不正确',
                    trigger: "blur"
                }
                ],
                departmentId: [{ required: true, message: '请输入部门名称', trigger: 'blur' },],
                formOfEmployment: [{ required: true, message: '选择聘用形式', trigger: 'blur' },],
                timeOfEntry: [{ required: true, message: '选择入职入职时间', trigger: 'blur' },],
                correctionTime: [{ required: true, message: '选择转正时间', trigger: 'blur' }, {
                    validator: (rule, val, cb) => {
                        if (this.addempfrom.timeOfEntry) {
                            if (new Date(this.addempfrom.timeOfEntry) > new Date(val)) {
                                cb(new Error('转正时间小于入职时间'))
                                return
                            }
                        }
                        cb()
                    }
                }],
            },
            //部门信息
            deptlist: [],
            //级联选择框的配置信息
            treeprop: {
                label: 'name',
                value: 'id'
            },
        }
    },
    created() {
        this.getdepartment()
        this.getempbyid()
    },
    methods: {
        //确认添加员工
        queryadd() {
            this.$refs.userForm.validate(async isok => {
                if (isok) {
                    //判断当前是新增还是修改
                    if (this.$route.params.id) {
                        try {
                            await upempbyid({...this.addempfrom,departmentId: this.addempfrom.departmentId[this.addempfrom.departmentId.length - 1]})
                        } catch (error) {
                          return  this.$message.error(error.message)
                        }
                        this.$message.success('修改成功')
                    }
                    else{
                        await addemp({ ...this.addempfrom, departmentId: this.addempfrom.departmentId[this.addempfrom.departmentId.length - 1] })
                        this.$message.success('添加成功')
                    }
                    this.$router.push('/employee')
                }
            })
        },
        //获取部门信息
        async getdepartment() {
            const res = await getdepartment()
            this.deptlist = listchangetree(res, 0)
        },
        //获取员工信息
        async getempbyid() {
            if (this.$route.params.id) {
                this.addempfrom = await getempbyid(this.$route.params.id)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.edit-form {
    background: #fff;
    padding: 20px;

    .inputW {
        width: 380px
    }
}
</style>